import 'package:flutter/material.dart';

class IconBtn extends StatefulWidget {
  @override
  _IconBtnState createState() => _IconBtnState();
}

class _IconBtnState extends State<IconBtn> {
  @override
  Widget build(BuildContext context) {
    GlobalKey key = GlobalKey<_IconBtnState>();

    return new Align(
      alignment: Alignment.centerRight,
      child: new IconButton(
        key: key,
        icon: new Icon(Icons.more_horiz, color: Colors.black),
        onPressed: () {
          // 使用路由跳转方式
          Navigator.push(
            context,
            new PopRoute(
              child: new Popup(
                btnKey: key,
                onClick: (v) => debugPrint('你点击了$v'), // 传到外面来的回调事件
              ),
            ),
          );
        },
      ),
    );
  }
}

class PopupPage extends StatelessWidget {
  Widget button(context, index) {
    return IconBtn();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('popup route')),
      body: new ListView.builder(itemBuilder: button),
    );
  }
}

class PopRoute extends PopupRoute {
  // push的耗时，milliseconds为毫秒
  final Duration _duration = Duration(milliseconds: 300);

  // 接收一个child，也就是我们push的内容。
  Widget child;

  // 构造方法
  PopRoute({@required this.child});

  @override
  Color get barrierColor => Colors.black12;

  @override
  bool get barrierDismissible => true;

  @override
  String get barrierLabel => null;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return child;
  }

  @override
  Duration get transitionDuration => _duration;
}

// 类型声明回调
typedef OnItem = Function(String value);

class Popup extends StatefulWidget {
  final OnItem onClick; //点击child事件
  final GlobalKey btnKey;

  Popup({this.onClick, this.btnKey});

  PopupState createState() => PopupState();
}

class PopupState extends State<Popup> {
  Offset topLeftPosition;
  Size size;

  @override
  void initState() {
    final RenderBox box = widget.btnKey.currentContext.findRenderObject();
    size = box.size; // 获取尺寸
    topLeftPosition = box.localToGlobal(Offset.zero);

    super.initState();
  }

  // item构建
  Widget itemBuild(item) {
    // 字体样式
    TextStyle labelStyle = TextStyle(color: Colors.white);

    return new Expanded(
      child: new TextButton(
        //点击Item
        onPressed: () {
          // 如果没接收也返回的花就会报错，所以这里需要判断
          if (widget.onClick != null) {
            Navigator.of(context).pop();
            widget.onClick(item); // 事件返回String类型的值
          }
        },
        child: new Text(item, style: labelStyle),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      child: new Stack(
        children: <Widget>[
          new Container(
            // 设置一个容器组件，是整屏幕的。
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.transparent, // 它的颜色为透明色
          ),
          new Positioned(
            child: new Container(
              width: 200,
              height: 36,
              decoration: BoxDecoration(
                color: Color.fromRGBO(75, 75, 75, 1.0),
                borderRadius: BorderRadius.all(Radius.circular(4.0)), // 圆角
              ),
              child: new Row(children: ['点赞', '评论'].map(itemBuild).toList()),
            ),
            top: topLeftPosition.dy, // 顶部位置
            left: topLeftPosition.dx - 200, // 右边位置
          )
        ],
      ),
      onTap: () {
        print("close popup");
        Navigator.of(context).pop();
      }, //点击空白处直接返回
    );
  }
}
